<template>
  <div class="add-edit">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple" v-loading="listLoading">
          <avue-tree :option="leftOption"
                     :data="leftData"
                     ref="tree"
                     @node-click="nodeClickLeft">
            <div class="custom-tree-node show-hide" slot-scope="{ node, data }">
              <span class="text" onselectstart="return false" :title=" data.standardIdentifier + '' + data.checkItem ">
                {{ data.standardIdentifier }} {{data.checkItem}}
              </span>
            </div>
          </avue-tree>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <avue-tree :option="categoryOption"
                     :data="categoryData"
                     ref="tree"
                     @node-click="nodeClickCategory">
            <div class="custom-tree-node show-hide" slot-scope="{ node, data }">
            <span class="text" onselectstart="return false" :title="data.name">
              <i :class="data.icon"/> {{ data.name }}
            </span>
            </div>
          </avue-tree>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <ul class="form-ul" v-if="type === 'edit' || showForm">
            <li>
              <label>检测项：</label>
              <span>{{ruleForm.checkStandardItem}}</span>
            </li>
            <li>
              <label>检测门类：</label>
              <span>{{ruleForm.categoryName}}</span>
            </li>
            <li>
              <label>检测字典：</label>
              <span>
                <el-select v-model="ruleForm.dictValue" size="small" style="margin-top: -3px; width: 150px">
                  <el-option v-for="(item, index) in dicOtherData"
                             :key="index"
                             :label="item.dictLabel + '（' + item.dictValue + '）'"
                             :value="item.dictValue"></el-option>
                </el-select>
              </span>
            </li>
            <li v-if="ruleForm.dictValue">
              <label>运算规则：</label>
              <span>
                <el-select v-model="ruleForm.checkOpRule" size="small" style="margin-top: -3px; width: 150px">
                  <el-option v-for="(item, index) in dicSelectData"
                             :key="index"
                             :label="item.dictLabel + '（' + item.dictValue + '）'"
                             :value="item.dictValue"></el-option>
                </el-select>
              </span>
            </li>
            <li v-if="ruleForm.dictValue">
              <label>检测参数：</label>
              <div>
                <el-input v-model="ruleForm.checkParam" type="textarea"></el-input>
              </div>
            </li>
            <li>
              <label>使用说明：</label>
              <div>
                <el-input v-model="ruleForm.useExplain" type="textarea" placeholder="情况说明，可为空"></el-input>
              </div>
            </li>
            <li>
              <label>启用状态：</label>
              <span>
              <el-switch v-model="ruleForm.isEnable"></el-switch>
            </span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <div class="btn-box text-right">
      <el-button size="small" @click="handleCansole">取消</el-button>
      <el-button v-if="type === 'edit' || showForm"
                 type="primary"
                 :loading="loading"
                 @click="handleSubmit"
                 size="small">{{type === 'add' ? '确定' : '修改'}}
      </el-button>
    </div>
  </div>

</template>

<script>
import { getTestItemList } from '../../../../../api/testItem/testItemBasics'

export default {
  name: 'testCategoryAdd',
  props: {
    categoryData: {
      type: Array,
      default: () => ([])
    },
    dicSelectData: {
      type: Array,
      default: () => ([])
    },
    dicOtherData: {
      type: Array,
      default: () => ([])
    },
    tabsMenuCode: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      listLoading: true,
      tableLoading: false,
      isEnable: true,
      leftData: [],
      headData: [],
      leftRowData: {},
      categoryRowData: {},
      headRowData: {},
      idTable: '',
      formData: {
        isEnable: true // 启用状态
      },
      showForm: false
    }
  },
  computed: {
    leftOption () {
      return {
        addBtn: false,
        menu: false,
        defaultExpandAll: true,
        // accordion: true, // 只展开一层
        props: {
          labelText: '标题',
          label: 'checkItem',
          value: 'id',
          children: 'children'
        }
      }
    },
    categoryOption () {
      return {
        addBtn: false,
        menu: false,
        defaultExpandAll: true,
        // accordion: true, // 只展开一层
        props: {
          labelText: '标题',
          label: 'name',
          value: 'id',
          children: 'children'
        }
      }
    },
    ruleForm () {
      return this.formData
    }
  },
  mounted () {
    if (this.rowData.idCategory) {
      this.formData = JSON.parse(JSON.stringify(this.rowData))
      this.formData.categoryName = this.matchingCategoryName(this.categoryData, this.formData.idCategory)
      this.idTable = this.rowData.idTable
    }
    this.getLeftData()
  },
  watch: {
    tabsMenuCode: {
      handler: () => {
        this.getLeftData()
      },
      deep: true
    },
    rowData (v) {
      this.formData = JSON.parse(JSON.stringify(v))
      if (v.categoryName) {
        this.formData.categoryName = this.matchingCategoryName(this.categoryData, this.formData.idCategory)
        this.idTable = v.idTable
      }
    }
  },
  methods: {
    matchingCategoryName (categoryData, idCategory) {
      let categoryName = ''
      const matchingCategoryName = (categoryData) => {
        categoryData.map(items => {
          if (items.idCategory === idCategory) {
            categoryName = items.name
          }
          if (items.children) {
            matchingCategoryName(items.children)
          }
        })
      }
      matchingCategoryName(categoryData)
      return categoryName
    },
    getLeftData () {
      const param = {
        pageNo: 1,
        pageSize: 1000,
        params: [{
          name: 'checkLink',
          op: 'eq',
          value: this.tabsMenuCode
        }]
      }
      this.listLoading = true
      getTestItemList(param).then(res => {
        this.leftData = res.data.data.list
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    nodeClickLeft (data) {
      this.leftRowData = data
      this.$set(this.formData, 'checkStandardItem', this.leftRowData.standardIdentifier + ' ' + this.leftRowData.checkItem)
      this.$set(this.formData, 'checkScope', this.leftRowData.checkScope)
    },
    nodeClickCategory (data) {
      this.categoryRowData = data
      this.$set(this.formData, 'idCategory', this.categoryRowData.idCategory)
      this.$set(this.formData, 'categoryName', this.categoryRowData.name)

      if (data.table && data.idCategory) {
        this.idTable = data.table[0].idTable
        this.$set(this.formData, 'idTable', this.idTable)
        this.showForm = true
      }
    },
    handleSubmit () {
      if (!this.formData.checkStandardItem) {
        this.$message.warning('请选择左侧检测层面！')
        return
      }
      this.$emit('handleSubmit', this.ruleForm)
    },
    handleCansole () {
      this.$emit('handleCansole')
    },
    handleEmpty () {
      // 清空内容
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .add-edit {
    padding-right: 50px;

    ::v-deep .avue-tree {
      height: calc(97vh - 230px);
    }

    .jh {
      ::v-deep .avue-tree {
        height: calc(97vh - 190px);
      }
    }

    .form-ul {
      line-height: 22px;

      li {
        & + li {
          margin-top: 15px;
        }

        label {
          width: 80px;
          color: #333;
        }

        span {
          display: inline-block;
          width: calc(100% - 85px);
          vertical-align: top;
          color: #666;
        }
      }
    }

    .btn-box {
      padding-top: 30px;
    }
  }
</style>
